<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>coordinate 坐标</title>
    <style type="text/css">
        #test{
            background-color: red;
            width: 200px;
            height: 200px;
            /*margin: 0 auto;*/
        }
    </style>
</head>
<body>
<div id="test"></div>
<script>
        /*
        * 1.clientX和clientY 相对于浏览器(可视区左上角0,0)的坐标
        * 2.screenX 和 screenY 相对于屏幕左上角(0,0)的坐标
        * 3.offsetX 和 offsetY 相对于事件源左上角(0,0)的坐标
        * 4.pageX 和 pageY 相对于整个网页左上角(0,0)的坐标
        * 5.X和Y IE属性 相对于
        * */
        var test=document.getElementById("test");
        test.onclick=function (e) {
            console.log("clientX------>"+e.clientX+"  clientY---------->"+e.clientY);
            console.log("screenX------>"+e.screenX+"  screenY---------->"+e.screenY);
            console.log("offsetX------>"+e.offsetX+"  offsetY---------->"+e.offsetY);
            console.log("pageX------>"+e.pageX+"  screenY---------->"+e.pageY);
            console.log("x------>"+e.x+"  y---------->"+e.y);
        }
</script>
</body>
</html>